<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>checkIn</title>
    <link rel="stylesheet" href="${pageContext.request.contextPath }/res/css/checkIn.css">
    <style>
      [v-cloak] {
        display:none;
      }
    </style>
</head>
<body class="bodyType">
  <div class="title">
    <samp>入住登记</samp>
  </div>
  <div style="width: 1000px;" id="checkIn" v-cloak>
      <div class="total">
        <div class="checkInTitel">
         	 入住信息
        </div>
        <hr style="color: #6d5a5a; width: 100%;">
        <div class="userCondition">
  
          <label for="guestName">姓名：</label>
          <input type="text" v-model="frist.guestName" style="width:  81px;" name="guestName" id="guestName">           
          <label for="sex" style="padding-left: 36px;">性别：</label>
          <select v-model="frist.sex"   name="sex" id="sex">
            <option value="男">男</option>
            <option value="女">女</option>
          </select>
          <label for="identity" style="padding-left: 39px;">身份证：</label>
          <input type="text" v-model="frist.identity"  name="identity" id="identity">
          <label for="tel" style="padding-left: 39px;">电话号码：</label>
          <input type="text" v-model="frist.tel" name="tel" id="tel">
  
          <div class="roomDiv" >
            <label for="roomNum">房号：</label>
            <input type="text" v-model="frist.roomNum" name="roomNum" id="roomNum">
  
            <label for="perDay" style="padding-left: 39px;">入住天数：</label>
            <input type="text" v-model="frist.perDay" name="perDay" id="perDay">
           </div>
          <div class="roomDiv">
            <label for="perpay">应预缴：</label>
            <div id="perpay" class="perpay">{{perpay}}</div>
            <label for="sum" style="padding-left: 36px;">总额：</label>
            <div id="sum" class="perpay">{{sum}}</div>
            <input type="button" @click="select" value="查询" id="select" style="width: 50px; height: 26px; margin-left: 27px;">
          </div>
        </div>
      </div>
    
      <!-- 加载其他同伴 -->
      <div class="total" id="addInformation">
        <div class="checkInTitel">
          随行同伴信息
        </div>
        <hr style="color: #f1f1f1; width: 100%;">

        <div class="userCondition" v-for="item in companionList">
          <label for="guestName1">姓名：</label>
          <input v-model="item.guestName" type="text" style="width:  81px;" name="guestName1" id="guestName1">  
          <label for="sex1" style="padding-left: 36px;">性别：</label>
          <select v-model="item.sex" name="sex1" id="sex1">
            <option value="男">男</option>
            <option value="女">女</option>
          </select>
          <label for="identity1" style="padding-left: 39px;">身份证：</label>
          <input v-model="item.identity" type="text" name="identity1" id="identity1">
          <div class="telStyle">
            <label for="tel1">电话号码：</label>
            <input v-model="item.tel" type="text" name="tel1" id="tel1"> 
          </div>
        </div>

        <!-- 添加或者删除 -->
        <div class="userCondition">
          <input type="button" @click="addGuest" style="width: 50px; height: 26px; " value="添加">
          <input type="button" @click="deleteGuest" style="width: 50px; height: 26px; margin-left: 27px;" value="删除"> 
        </div>
      </div>
      <!-- 付款 -->
      <div class="total">
        <div class="checkInTitel">
            付款
        </div>
        <hr style="color: #f1f1f1; width: 100%;">
        <div class="userCondition">
            <label for="pay">实付：</label>
            <input type="text" v-model="pay" style="width:  81px;" name="pay" id="pay">  
            <input type="button" name="submit" @click="submitInformation" value="提交信息" style=" height: 26px; margin-left: 20px;">
        </div>
    </div>
  </div>
  <script src="${pageContext.request.contextPath }/res/js/jquery.js"></script>
  <script src="${pageContext.request.contextPath }/res/js/vue.js"></script>
  <script src="${pageContext.request.contextPath }/res/js/checkIn.js"></script>
</body>
</html>